<template>
  <Page class="bg-[#f5f7fa] min-h-screen">
    <PageHeader title="系统消息" :showBack="true" />
    
    <!-- 系统消息列表 -->
    <view class="mx-[24rpx] mt-[24rpx]">
      <view v-if="loading" class="flex justify-center items-center h-[200rpx]">
        <view class="text-[28rpx] text-[#999]">加载中...</view>
      </view>
      
      <view v-else-if="systemMessages.length === 0" class="bg-white rounded-[24rpx] p-[80rpx] text-center">
        <view class="text-[28rpx] text-[#999] mb-[16rpx]">暂无系统消息</view>
        <view class="text-[24rpx] text-[#ccc]">系统会在这里推送重要通知</view>
      </view>
      
      <view v-else class="space-y-[16rpx]">
        <view
          v-for="(message, index) in systemMessages"
          :key="index"
          class="bg-white rounded-[24rpx] p-[24rpx] shadow-sm"
        >
          <view class="flex items-start justify-between mb-[16rpx]">
            <view class="flex items-center">
              <view class="w-[60rpx] h-[60rpx] rounded-full bg-[#e3f2fd] text-[#2196F3] flex items-center justify-center font-bold text-[24rpx] mr-[16rpx]">
                系
              </view>
              <view>
                <view class="text-[28rpx] font-bold text-[#222] mb-[4rpx]">{{ message.title }}</view>
                <view class="text-[22rpx] text-[#999]">{{ message.time }}</view>
              </view>
            </view>
            <view v-if="!message.read" class="w-[12rpx] h-[12rpx] rounded-full bg-red-500"></view>
          </view>
          
          <view class="text-[26rpx] text-[#666] leading-[1.6] mb-[16rpx]">
            {{ message.content }}
          </view>
          
          <view v-if="message.action" class="flex justify-end">
            <nut-button
              size="small"
              type="primary"
              class="bg-[#2196F3] border-none rounded-[16rpx] px-[24rpx] py-[8rpx] text-[24rpx]"
              @click="handleAction(message)"
            >
              {{ message.actionText }}
            </nut-button>
          </view>
        </view>
      </view>
    </view>
  </Page>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Taro from '@tarojs/taro';
import PageHeader from '@/components/PageHeader.vue';

/**
 * 系统消息列表页面
 * @description 显示系统通知消息，支持操作按钮
 */

const loading = ref(true);

// 系统消息列表
const systemMessages = ref([
  {
    id: '1',
    title: '系统维护通知',
    content: '今晚22:00-24:00进行系统升级，期间可能影响部分功能使用，请提前做好准备。',
    time: '2024-01-15 14:30',
    read: false,
    action: true,
    actionText: '查看详情'
  },
  {
    id: '2',
    title: '新功能上线',
    content: '智能客服助手已上线，为您提供更优质的服务体验，欢迎体验新功能。',
    time: '2024-01-15 14:32',
    read: false,
    action: true,
    actionText: '立即体验'
  },
  {
    id: '3',
    title: '任务状态更新',
    content: '您发布的任务"超市临时导购员"已经有人接单了，请及时查看并确认。',
    time: '2024-01-15 14:35',
    read: true,
    action: true,
    actionText: '查看任务'
  },
  {
    id: '4',
    title: '账户安全提醒',
    content: '检测到您的账户在新设备登录，如非本人操作，请及时修改密码。',
    time: '2024-01-14 16:20',
    read: true,
    action: false
  },
  {
    id: '5',
    title: '提现到账通知',
    content: '您的提现申请已处理完成，金额¥500.00已到账，请注意查收。',
    time: '2024-01-14 10:15',
    read: true,
    action: false
  }
]);

/**
 * 处理消息操作
 */
const handleAction = (message: any) => {
  // 标记为已读
  message.read = true;
  
  switch (message.actionText) {
    case '查看详情':
      Taro.showToast({
        title: '跳转到维护详情页面',
        icon: 'none'
      });
      break;
    case '立即体验':
      Taro.showToast({
        title: '跳转到新功能页面',
        icon: 'none'
      });
      break;
    case '查看任务':
      Taro.navigateTo({
        url: '/pages/post/my-publish'
      });
      break;
    default:
      Taro.showToast({
        title: '操作成功',
        icon: 'success'
      });
  }
};

onMounted(() => {
  // 模拟加载
  setTimeout(() => {
    loading.value = false;
  }, 500);
});
</script> 